<!-- 收件箱 -->
<template>

  
<el-container style="height: 800px; border: 1px solid #eee">
    <el-aside width="200px" style="background-color: rgb(238, 241, 246)">
      <el-menu :default-openeds="['1', '3']">
        <el-submenu index="1">
          <template slot="title"><i class="el-icon-message"></i>邮件</template>
          <el-menu-item-group>

           <el-submenu index="1-1">
          <template slot="title">收件箱</template>
          <el-badge :value="10" class="item">
                <el-button index="1-1-1" type="primary" icon="el-icon-message" @click="change(0)" size="small">未读</el-button>
           </el-badge>
           <br>
           <el-button index="1-1-2" type="primary" icon="el-icon-message" @click="change(1)" size="small">已读</el-button>
        </el-submenu>
        <br>
           <el-button index="1-2" type="primary" icon="el-icon-postcard" @click="change(2)" size="small">发件箱</el-button>   
           <br> 
           <el-button index="1-3" type="primary" icon="el-icon-position" @click="change(3)"  size="small">发邮件</el-button>    
          </el-menu-item-group>
        </el-submenu>
       
      </el-menu>
    </el-aside>
    
    <el-container>
      
      <el-main>
        <div v-show="0===number" >
        <el-table v-loading="loading" :data="messageList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="id" align="center" prop="id" />
        <el-table-column label="发送者id" align="center" prop="senderId" />
        <el-table-column label="接收者id" align="center" prop="accepterId" width="100"/>
          
        <el-table-column label="标题" align="center" prop="headline" />
        <el-table-column label="内容" align="center" prop="content" /> 
        <el-table-column align="center" sortable prop="readStatus" label="读取状态" min-width="50">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.readStatus=='Y'?nshow:fshow" active-color="#13ce66" inactive-color="#ff4949" 
          @change="editType(scope.$index, scope.row)">
          </el-switch>
        </template>
      </el-table-column>
        
        <el-table-column label="发送时间" align="center" prop="transmissionTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.transmissionTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
          </template>
        </el-table-column>
       
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-s-comment"
              @click="handleUpdate(scope.row)"
            >查看</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :page-sizes="[5,10,15,20]"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      
        </div>
       <div v-show="1===number">
        <el-table v-loading="loading" :data="readmessageList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="id" align="center" prop="id" />
        <el-table-column label="发送者id" align="center" prop="senderId" />
        <el-table-column label="接收者id" align="center" prop="accepterId" width="100"/>
          
        <el-table-column label="标题" align="center" prop="headline" />
        <el-table-column label="内容" align="center" prop="content" /> 
        <el-table-column align="center" sortable prop="readStatus" label="读取状态" min-width="50">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.readStatus=='Y'?nshow:fshow" active-color="#13ce66" inactive-color="#ff4949" 
          @change="editType(scope.$index, scope.row)">
          </el-switch>
        </template>
      </el-table-column>
        
        <el-table-column label="发送时间" align="center" prop="transmissionTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.transmissionTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
          </template>
        </el-table-column>
       
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-s-comment"
              @click="handleUpdate(scope.row)"
            >查看</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :page-sizes="[5,10,15,20]"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
       </div>
       <div v-show="2===number">
        <el-table v-loading="loading" :data="messageList" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" align="center" />
        <el-table-column label="id" align="center" prop="id" />
        <el-table-column label="发送者id" align="center" prop="senderId" />
        <el-table-column label="接收者id" align="center" prop="accepterId" width="100"/>
          
        <el-table-column label="标题" align="center" prop="headline" />
        <el-table-column label="内容" align="center" prop="content" /> 
        <el-table-column align="center" sortable prop="readStatus" label="读取状态" min-width="50">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.readStatus=='Y'?nshow:fshow" active-color="#13ce66" inactive-color="#ff4949" 
          @change="editType(scope.$index, scope.row)">
          </el-switch>
        </template>
      </el-table-column>
        
        <el-table-column label="发送时间" align="center" prop="transmissionTime" width="180">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.transmissionTime, '{y}-{m}-{d} {h}:{m}:{s}') }}</span>
          </template>
        </el-table-column>
       
        <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
          <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-s-comment"
              @click="handleMessage()"
            >查看</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="total>0"
        :page-sizes="[5,10,15,20]"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
        </div>
        <div v-show="3===number">
      
        </div>
        
      </el-main>
    </el-container>
  </el-container>
 
</template>


  
  <style>
    .el-header {
      background-color: #B3C0D1;
      color: #333;
      line-height: 60px;
    }
    
    .el-aside {
      color: #333;  
    }
  </style>
  
  <script>
    import {listMessage,listreadMessage,updateRead,getMessage} from "@/api/credit/message.js";
    export default {
      data() {
       
        return {
          a:0,
          number:0,
          nshow: true, //switch开启
        fshow: false, //switch关闭
        //还款方式
        credit:'',
        //还款期限
        limit:'',
        // 遮罩层
        loading: true,
        // 选中数组
        ids: [],
        // 非单个禁用
        single: true,
        // 非多个禁用
        multiple: true,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 站内信未读表格数据
        messageList: [],
         // 站内信已读表格数据
         readmessageList: [],
        // 弹出层标题
        title: "",
        // 是否显示弹出层
        open: false,
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
          id: null,
         senderId:null,
         accepterId:null,
         headline:null,
         content:null,
         readStatus:null,
         transmissionTime:null
        },
        // 表单参数
        form: {},
        // 表单校验
        rules: {
        }
        }
      },
      created() {
    this.getList(this.queryParams);
    this.getRead(this.queryParams);
  },
  
      methods:{
         /** 查询站内信未读列表 */
      getList() { 
        this.loading = true;
        listMessage(this.queryParams).then(response => {
          this.messageList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
       /** 查询站内信已读列表 */
       getRead() { 
        this.loading = true;
        listreadMessage(this.queryParams).then(response => {
          this.readmessageList = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
     
      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: null,
          productName: null,
          image: null,
          creater:null,
          creatTime:null,
          updater:null,
          updateTime:null,
          escrow:null,
          enableStatus:null,
          enabledStatus:null,
          monthRate:null,
          consultingRate:null,
          marginRate:null,
          paymentMethod:null,
          loanTerm:null,
        };
        this.resetForm("form");
      },
      search(){
        searchProduct(this.queryParams).then(res=>{
          console.log(res);
          this.productsList = res.rows;
          this.total = res.total;
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        // this.queryParams.pageNum = 1;
         this.search();

      },
      editType: function(index,row) {
      this.loading = true
      // 修改状态
      editOneType(row.id,row.enableStatus).then(res => {
        this.loading = false
        this.getList(this.queryParams)
      })
    },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      /** 新增按钮操作 */
      handleAdd() {
        var username = this.$store.state.user.name;
        this.reset();
        this.form.creater=username;
        this.open = true;
        this.title = "添加产品";
      },
      /** 邮件按钮操作 */
       handleMessage(row){
        this.$router.push({name:'creditMessage'});
       },
      /** 修改按钮操作 */
      handleUpdate(row) {
        var username = this.$store.state.user.name;//获取账号名称
        console.log();
        this.reset();
        const id = row.id || this.ids
        getMessage(id).then(response => {
          this.form = response.data;
          this.form.updater=username;
          this.open = true;
          this.title = "信息";
          this.$router.push({name:'creditMessage'});
         });
      },
      /** 提交按钮 */
      submitForm() {
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != null) {
              updateRead(this.form).then(response => {
                this.$modal.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              });
            } else {
              addProducts(this.form).then(response => {
                this.$modal.msgSuccess("新增成功");
                this.open = false;
                this.getList();
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const ids = row.id || this.ids;
        this.$modal.confirm('是否确认删除产品编号为"' + ids + '"的数据项？').then(function() {
          return delProducts(ids);
        }).then(() => {
          this.getList();
          this.$modal.msgSuccess("删除成功");
        }).catch(() => {});
      },
      /** 导出按钮操作 */
      handleExport() {
        this.download('system/products/export', {
          ...this.queryParams
        }, `products_${new Date().getTime()}.xlsx`)
      },
        change: function (index) {
            this.number = index; //重要处
          },
        hande(a){
            a=1;
        }
      }
    };
  
  </script>
  <style>

  </style>